define(['../libs/jquery/jquery.min.js'],()=>{
    class Rexuan{
        constructor(){
            this.product = document.querySelectorAll('.itemlist')
            this.span = document.querySelector('.shopspan')
            this.init()
        }
        init(){
            this.Getdata()
            // this.count()
        }
        Getdata(){
            $.get('../data/goods.json','json')
            .then(res=>{
                let data = res.slice(0,500)
                this.render(data)
            })
        }
        render(data){
            let arr = data.slice(401,435)
            let arr1 = data.slice(436,437)
            let arr2 = data.slice(435,436)
            let arr3 = data.slice(438,439)
            $('.itemlist')[0].innerHTML = `
                <li class="item">
                    <div class="product">
                        <i class="w-icon-common icon-common-redIcon productIcon">
                            <div class="f-fz16">TOP</div>
                            <div class="sequence">01</div>
                        </i>
                        <div class="hd">
                            <a href="http://localhost:8888/html/details.html?id=${arr1[0].goods_id}">
                                <img src="${arr1[0].img_small_logo}" alt="">
                            </a>
                        </div>
                        <div class="bd">
                            <h4 class="name">${arr1[0].title}</h4>
                            <p class="price">
                                <span>￥${arr1[0].price}</span>
                            </p>
                            <b class="iconfont icon-gouwuche" data-id=${arr1[0].goods_id}></b>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="product">
                        <i class="w-icon-common icon-common-redIcon productIcon">
                            <div class="f-fz16">TOP</div>
                            <div class="sequence">02</div>
                        </i>
                        <div class="hd">
                            <a href="http://localhost:8888/html/details.html?id=${arr2[0].goods_id}">
                                <img src="${arr2[0].img_small_logo}" alt="">
                            </a>
                        </div>
                        <div class="bd">
                            <h4 class="name">${arr2[0].title}</h4>
                            <p class="price">
                                <span>￥${arr2[0].price}</span>
                            </p>
                            <b class="iconfont icon-gouwuche" data-id=${arr2[0].goods_id}></b>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="product">
                        <i class="w-icon-common icon-common-redIcon productIcon">
                            <div class="f-fz16">TOP</div>
                            <div class="sequence">03</div>
                        </i>
                        <div class="hd">
                            <a href="http://localhost:8888/html/details.html?id=${arr3[0].goods_id}">
                                <img src="${arr3[0].img_small_logo}" alt="">
                            </a>
                        </div>
                        <div class="bd">
                            <h4 class="name">${arr3[0].title}</h4>
                            <p class="price">
                                <span>￥${arr3[0].price}</span>
                            </p>
                            <b class="iconfont icon-gouwuche" data-id=${arr3[0].goods_id}></b>
                        </div>
                    </div>
                </li>
            `
            arr.forEach(item=>{
                $('.itemlist')[0].innerHTML +=`
                    <li class="item">
                        <div class="product">
                            <div class="hd">
                                <a href="http://localhost:8888/html/details.html?id=${item.goods_id}">
                                    <img src="${item.img_small_logo}" alt="">
                                </a>
                            </div>
                            <div class="bd">
                                <h4 class="name">${item.title}</h4>
                                <p class="price">
                                    <span>￥${item.current_price}</span>
                                </p>
                            <b class="iconfont icon-gouwuche" data-id=${item.goods_id}></b>
                            </div>
                        </div>
                    </li>
                `
            })
                // $(".paging_list").paging({
                //     PageNum: 10, //每页显示数目
                //     pageMax: true, //按钮长度是否显示
                //     pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
                //     pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
                //     pageInput: true, //是否使用文本框输入跳转
                //     pagingBtnHide: false, //是否让按钮变为一个
                //     pagingBtnPaging: true,//按钮是否分页
                //     pagingDisplay: "flex"//显示的属性，弹性盒子还是块化
                // })
            this.bindHtml(data)
        }
        bindHtml(data){
            this.product[0].onclick = (e)=>{
                let target = e.target || e.srcElement
                if(target.nodeName == 'B'){
                    let id = target.dataset.id - 0
                    let goods = data.find(item=>{return item.goods_id == id})
                    // console.log(goods)
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    console.log(list)
                    if(!list.length){
                        list.push(goods)
                        goods.cart_number = 1
                    }else{
                        let res = list.some(item=>{return item.goods_id == id})
                        if(res){
                            let index = list.findIndex(item=>{return item.goods_id == id})
                            list[index].cart_number++
                        }else{
                            list.push(goods)
                            goods.cart_number = 1
                        }
                    }
                    localStorage.setItem('cart', JSON.stringify(list))
                    // this.count()
                }
            }
        }
        // count(){
        //     let list = JSON.parse(localStorage.getItem('cart')) || []
        //     let num = 0
        //     list.forEach(item=>{
        //         num += item.cart_number - 0
        //     })
        //     this.span.innerHTML = num
        //     console.log('获取');
        // }

    }
    return {
        Rexuan : new Rexuan()
    }
})
